import { useState, useEffect } from 'react';
import { AntDesign } from '@expo/vector-icons';
import { FlatList, StyleSheet, Modal, Text, TextInput, Button, View, Image, ImageBackground } from 'react-native';
import { useAuth } from '../context/AuthProvider';

const MyPackage = ({ navigation }) => {
    const { user } = useAuth()
    const [page, setPage] = useState(1);
    const [list, setList] = useState([]);
    const [refreshing, setRefreshing] = useState(false);
    const [page1, setPage1] = useState(1);
    const [list1, setList1] = useState([]);
    const [refreshing1, setRefreshing1] = useState(false);
    const [modalVisible, setModalVisible] = useState(false)
    const [money, setmoney] = useState("");
    const Center = () => {
        navigation.navigate('tab')
    }

    useEffect(() => {
        navigation.setOptions({
            title: '去充值',
            headerBackVisible: false,
            headerRight: () =>
                <Button
                    title='去充值'
                    color={'orange'}
                    fontColor={"black"}
                    fontWeight={'bold'}
                    onPress={() => setModalVisible(!modalVisible)}
                />,
            headerLeft: () =>
                <View style={{ width: 100 }}>
                    <Text onPress={() => Center()}>
                        <AntDesign
                            name='arrowleft'
                            size={25}
                            color="black"
                        />
                    </Text>
                </View>
        })
    }, [])

    useEffect(() => {
        fetch('http://10.7.89.174:3000/Contract',
            {
                method: 'POST',
                body: JSON.stringify({
                    userName: user.userName
                })
            })
            .then(res => res.json())
            .then(res => {
                setRefreshing(false)
                // console.log(res)
                if (page == 1) {
                    setList(res.List)
                    console.log(list)
                }
                else {
                    setList([...list, ...res.List])
                }
            })
        fetch('http://10.7.89.174:3000/Package',
            {
                method: 'POST',
                body: JSON.stringify({
                    userName: user.userName
                })
            })
            .then(res => res.json())
            .then(res => {
                setRefreshing1(false)
                setList1(res.List)
                console.log1(list1)
            })
    }, [])

    const renderItem = ({ item }) => (
        <View key={item.id}>
            <View style={styles.djx1}>
                <Text style={styles.djx5}>
                    物品租赁合同
                </Text>
                <View style={styles.djx2}>
                    <Text style={styles.djx3}>甲方：{item.AuserName}</Text><Text style={{ marginLeft: "40%", marginTop: "-7%", fontSize: 20 }}>电话号码：{item.AphoneNum}</Text>
                    <Text style={styles.djx3}>乙方：{item.BuserName}</Text><Text style={{ marginLeft: "40%", marginTop: "-7%", fontSize: 20 }}>电话号码：{item.BphoneNum}</Text>
                </View>
                <View>
                    <Text style={styles.djx4}>
                        1.甲方应在约定时间内提供合同中的租用物品，如有不可抗拒因素，双方可协商决定。
                    </Text>
                    <Text style={styles.djx4}>
                        2.乙方应按约定如期向甲方支付租用费用。
                    </Text>
                    <Text style={styles.djx4}>
                        3.合同期满，乙方可将物品还甲方，甲方视费用物品折旧情况收取折旧。
                    </Text>
                    <Text style={styles.djx4}>
                        4.本合同最终解释权归甲方所有。
                    </Text>
                    <Image
                        source={require('../icon/已同意.jpg')}
                        style={{ width: "40%", height: "20%", marginLeft: "50%", marginTop: 20 }}
                    />
                </View>
            </View>
        </View>
    )
    const onFinish = () => {
        setModalVisible(false)
    }
    const onEnd = () => {
        setPage(page + 1)
    }
    const onRefresh = () => {
        setRefreshing(true);
        setPage(1);
    }
    const onEnd1 = () => {
        setPage1(page + 1)
    }
    const onRefresh1 = () => {
        setRefreshing1(true);
        setPage1(1);
    }
    const renderItem1 = ({ item }) => (
        <View key={item.id}>
            <Text style={{ fontSize: 20 }}>{item.money}</Text>
        </View>
    )
    const onchongzhi = () => {
        fetch('http://10.7.89.174:3000/chongzhi',
            {
                method: 'POST',
                body: JSON.stringify({
                    userName: user.userName,
                    money1: money
                })
            })
            .then(res => res.json())
            .then(res => {
                if(res.code==200){
                    alert("充值成功")
                    setModalVisible(false);
                }

            })
    }

    return (
        <View style={{ flex: 1 }}>
            <ImageBackground source={require('../img/bgimg.jpg')} style={styles.bgimg}>
                <View style={{ width: "56%", height: 60, marginLeft: "23%", marginTop: 30 }}>
                    <Text style={{ fontSize: 20 }}>
                        我的余额
                    </Text>
                    <Text style={{ marginLeft: "80%", marginTop: -28 }}>
                        <FlatList
                            ListEmptyComponent={<Text>暂无数据</Text>}
                            onRefresh={onRefresh1}
                            refreshing={refreshing1}
                            data={list1}
                            renderItem={renderItem1}
                            onEndReached={onEnd1}
                            keyExtractor={item => item.id}
                        />
                    </Text>
                </View>
                <FlatList
                    ListEmptyComponent={<Text>暂无数据</Text>}
                    onRefresh={onRefresh}
                    refreshing={refreshing}
                    data={list}
                    renderItem={renderItem}
                    onEndReached={onEnd}
                    keyExtractor={item => item.id}
                />
                <Modal
                    animationType="slide"
                    transparent={true}
                    visible={modalVisible}
                    onRequestClose={() => {
                        setModalVisible(!modalVisible);
                        onFinish
                    }}
                >
                    <View style={styles.centeredView} >
                        <View style={styles.modalView}>
                            <View style={{ marginTop: 50 }}>
                                <Text>充值金额</Text>
                                <TextInput
                                    placeholder="单行输入"
                                    value={money}
                                    onChangeText={(value) => setmoney(value)}
                                    style={{ height: 40, width: "100%", borderColor: 'grey', borderWidth: 1, marginLeft: "30%", marginTop: "-11%" }}
                                />
                            </View>
                            <View style={{ width: "60%", marginLeft: "0%", marginTop: 25 }}>
                                <Button
                                    title="确认充值"
                                    onPress={() => onchongzhi()}
                                />
                            </View>
                        </View>
                    </View>
                </Modal>
            </ImageBackground>
        </View>
    );
}

const styles = StyleSheet.create({
    djx1: {
        width: "90%",
        height: 500,
        backgroundColor: "white",
        marginLeft: "5%",
        borderRadius: 23,
        borderColor: "lightgrey",
        borderWidth: 1,
    },
    djx5: {
        width: "60%",
        height: 60,
        fontSize: 30,
        marginLeft: "27%",
        marginTop: "5%"
    },
    djx2: {
        marginLeft: "7%",
        marginTop: 15
    },
    djx3: {
        fontSize: 20
    },
    djx4: {
        width: "86%",
        marginLeft: "7%",
        marginTop: 10,
        lineHeight: 30,
        fontSize: 15
    },
    bgimg: {
        flex: 1,
        resizeMode: "cover",
    },
    modalView: {
        width: "60%",
        height: "40%",
        backgroundColor: "white",
        borderRadius: 20,
        marginLeft: "20%",
        alignItems: "center",
        shadowColor: "black",
        shadowOffset: {
            width: 0,
            height: 2
        },
        shadowOpacity: 0.5,
        shadowRadius: 3.84,
        elevation: 20,
        marginTop: "40%"
    },
});

export default MyPackage